<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>log</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
</head>
<body>

<div class="container-fluid">
    <div class="content">

        <!--                表格-->
        <table class="layui-hide" id="test" lay-filter="role">
        </table>
        <!--                表格./-->

    </div>

</div>
<script type="text/html" id="barDemo">
    <button type='button' class='layui-btn-sm layui-btn layui-btn-primary' lay-event="reback">
        回退<i class="fas fa-undo-alt"></i>
    </button>
</script>
<script>
    layui.use(['table', 'tree'], function () {
        var table = layui.table;
        var tree = layui.tree;
        let datas = []
        var treedate;

        function getAllRoles() {
            $.ajax({
                url: "getlogs",
                dataType: "json",
                success: function (resp) {
                    datas = resp
                }
            })

            setTimeout(function () {
                table.render({
                    elem: '#test'
                    , id: "test"
// , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[ //表头
                        {field: 'lid', title: '编号', sort: true, fixed: 'left', width: 100}
                        , {field: 'edate', title: '操作时间', width: 160}
                        , {field: 'before', title: '之前的数据'}
                        , {field: 'after', title: '之后的数据'}
                        , {field: 'ltype', title: '操作类型', width: 160}
                        , {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo', width: 160}
                    ]]
                    , data: datas
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , groups: 3 //只显示 1 个连续页码
                        , first: false //不显示首页
                        , last: false //不显示尾页
                        , limit: 4
                    }
                    , height: '236'
                });
            }, 500)

        }

        setTimeout(function () {
//延迟加载
            getAllRoles()
        }, 100);


        table.on('tool(role)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === "reback") {
                $.ajax({
                    url: 'logreback/' + data.lid,
                    dataType: 'json',
                    success: function (resp) {
                        if (resp === 1) {
                            location.reload()
                        }else{
                            layer.alert("回退失败")
                        }
                    }
                })
            }
        });

    });
</script>

</body>
</html>